<template>
	<div class="index">
		<div class="header">
			<div class="left"><img alt="头像" :src="userUrl" /></div>
			<div class="center">禧电宝</div>

			<div class="right"><img alt="头像" :src="inforUrl" /></div>
		</div>
		<!--放地图区域-->
		<div class="map">
			<img :src="mapUrl" />
		</div>
		<div class="bottom">
			<button><img alt="头像" :src="saoUrl" /> 扫码充电</button>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'index',
		data() {
			return {
				userUrl: require('../assets/img/user.png'),
				inforUrl: require('../assets/img/infor.png'),
				mapUrl: require('../assets/img/map.png'),
				saoUrl: require('../assets/img/sao.png'),

			};
		}
	};
</script>
<style lang="less" scoped>
	.index {
		background: #f2f2f2;

		.bottom {
			>button {
				border-radius: 7px;
				line-height: 0.8rem;
				width: 100%;
				color: white;
				font-size: 18px;
				height: .9rem;
				margin-top: 14px;
				background: #257FE7;

				>img {
					vertical-align: middle;
					width: 30px;
				}
			}

			background:white;
			padding:22px;
			border-radius: 15px 15px 0 0;
		}

		.map {
			>img {
				width: 100%
			}
		}

		.header {
			.left {
				>img {
					width: .25rem;
				}

				width: 10%;
				text-align: center;
			}

			.center {
				width: 80%;
				font-size: 19px;
				font-weight: bold;
				color: rgb(34, 34, 34);
				text-align: center;
			}

			.right {
				>img {
					width: .25rem;
				}

				width: 10%;
				text-align: center;
			}

			height: 40px;
			width: 100%;
			line-height: 40px;
			display: -webkit-box;
			background: rgba(255, 255, 255, 1);



			div {

				-webkit-box-flex: 1;

			}
		}


	}
</style>
